const computerBehavior = require('miniprogram-computed').behavior
// 引入防抖函数
import {
  debounce
} from 'miniprogram-licia'
import {
  reqGetCartList,
  reqCheckAllCart,
  reqCheckCart,
  reqAddToCart,
  reqDeleteCart
} from '../../api/cart'
import {
  cartBehavior
} from './behavior'
Page({
  // 组件的属性列表
  behaviors: [cartBehavior, computerBehavior],
  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～',
  },
  // 计算属性
  computed: {
    // 全选按钮的状态根据购物车列表中每个商品的选中状态来计算
    selectedAll(data) {
      return data.cartList.length > 0 && data.cartList.every(item => item.isChecked === 1)
    },
    // 计算全部选中商品的总价格
    totalMoney(data) {
      return data.cartList.reduce((total, item) => {
        if (item.isChecked === 1) {
          return (total + (item.price * item.count) * 100)
        } else {
          return total
        }
      }, 0)
    }
  },
  onShow() {
    const {
      token
    } = this.data
    if (!token) {
      this.setData({
        emptyDes: '您尚未登录，点击登录获取更多权益',
        cartList: []
      })
      return
    }
    this.getCartList()
  },
  // 获取购物车列表
  async getCartList() {
    const {
      code,
      data
    } = await reqGetCartList()
    if (code === 200) {
      if (data.length === 0) {
        this.setData({
          emptyDes: '还没有添加商品，快去添加吧～'
        })
        return
      }
      this.setData({
        cartList: data,
      })
    }
  },
  // 选中 || 取消选中商品
  async checkedChange(event) {
    const {
      id,
      index
    } = event.target.dataset
    // 同步后台选中了某个商品，需要购买
    const isChecked = event.detail ? 1 : 0
    const {
      code
    } = await reqCheckCart({
      goodsId: id,
      isChecked: isChecked
    })
    // 同步成功后，本地数据也要同步修改
    if (code === 200) {
      this.setData({
        [`cartList[${index}].isChecked`]: isChecked
      })
    }
  },
  // 全部选中 || 取消全部选中商品
  async selectedAllChange(event) {
    const {
      cartList
    } = this.data
    // 同步后台接口
    const isChecked = event.detail ? 1 : 0
    const {
      code
    } = await reqCheckAllCart(isChecked)
    if (code === 200) {
      this.setData({
        cartList: cartList.map(item => {
          item.isChecked = isChecked
          return item
        })
      })
    }
  },
  // 购物车列表每项商品数量点击增加 || 减少按钮时，增加防抖函数，避免重复发送请求，导致服务器压力过大
  stepperChange: debounce(async function (event) {
    /**
    *  在输入框中输入购买的数量，并**`不是直接将输入的数量同步给服务器，而是需要计算差值`**，服务器端进行处理
        差值的计算公式：
        差值 = 新值 - 旧值
        例如：
        1. 原来是 1，用户输入 11， 差值是：11 - 1 = 10，传递给服务器的是：10，服务器接收到 10 + 1 = 11 
        2. 原来是 11，用户输入 5， 差值是：5 - 11 = -6，传递给服务器的是：-6，服务器接收到 -6 + 11 = 5
        加入购物车功能：
        更新购买数量 和 加入购物车，使用的是同一个接口，为什么加入购物车没有计算差值，
        这是因为在加入购物车以后，服务器对商品购买数量直接进行了累加。
        例如：之前购物车添加了某个商品，购买数量是 1 个，商品详情又加入 1 个， 直接累加，在购物车显示购买 2 个
    * 
    */
    const {
      id,
      index,
      oldbuycount
    } = event.target.dataset
    const diffCount = event.detail - oldbuycount
    // 同步后台要添加的商品数量（这里指的是差值）
    const {
      code
    } = await reqAddToCart({
      goodsId: id,
      count: diffCount
    })
    // 成功后，同步本地的数据
    if (code === 200) {
      this.setData({
        [`cartList[${index}].count`]: event.detail
      })
    }
  }, 500),
  // 删除购物车列表商品
  async delCartChange(event) {
    const result = await wx.flowerTipModal({
      content: '您确定删除该商品吗？'
    })
    if (result) {
      const {
        id
      } = event.target.dataset
      const {
        code,
        message
      } = await reqDeleteCart(id)
      if (code === 200) {
        wx.flowerTipToast({
          title: message,
          icon: 'success'
        })
        this.getCartList()
      }
    }
  },
  // 去结算按钮，跳转到结算订单页面
  goOrderPage() {
    if (this.data.totalMoney === 0) {
      wx.flowerTipToast({
        title: '请选择要购买的商品'
      })
      return
    }
    wx.navigateTo({
      url: '/modules/orderPayModule/pages/order/detail/detail',
    })
  }
})